import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import type { User, Feature, Contact } from './types'

export const useAppStore = defineStore('app', () => {
  // 状态
  const user = ref<User | null>(null)
  const features = ref<Feature[]>([
    {
      id: '1',
      title: '现代化设计',
      description: '采用最新的设计趋势，简约而不简单，提供优雅的用户体验',
      icon: '🎨',
      color: '#1890ff'
    },
    {
      id: '2',
      title: '响应式布局',
      description: '完美适配各种设备，从手机到桌面，提供一致的视觉体验',
      icon: '📱',
      color: '#52c41a'
    },
    {
      id: '3',
      title: '流畅动画',
      description: '精心设计的动画效果，让每一次交互都充满愉悦感',
      icon: '✨',
      color: '#fa8c16'
    },
    {
      id: '4',
      title: 'TypeScript',
      description: '使用 TypeScript 构建，提供类型安全和更好的开发体验',
      icon: '🔒',
      color: '#722ed1'
    }
  ])
  const contact = ref<Contact>({
    email: 'hello@example.com',
    phone: '+86 138 0000 0000',
    address: '上海市浦东新区',
    socialLinks: [
      { platform: 'GitHub', url: 'https://github.com', icon: '🐙' },
      { platform: 'LinkedIn', url: 'https://linkedin.com', icon: '💼' },
      { platform: 'Twitter', url: 'https://twitter.com', icon: '🐦' },
      { platform: 'Email', url: 'mailto:hello@example.com', icon: '📧' }
    ]
  })
  const loading = ref(false)
  const theme = ref<'light' | 'dark'>('light')
  const locale = ref('zh-CN')

  // 计算属性
  const isDark = computed(() => theme.value === 'dark')
  const featuresCount = computed(() => features.value.length)

  // 方法
  const setUser = (userData: User | null) => {
    user.value = userData
  }

  const setTheme = (newTheme: 'light' | 'dark') => {
    theme.value = newTheme
    document.documentElement.setAttribute('data-theme', newTheme)
  }

  const toggleTheme = () => {
    setTheme(theme.value === 'light' ? 'dark' : 'light')
  }

  const setLoading = (isLoading: boolean) => {
    loading.value = isLoading
  }

  const addFeature = (feature: Feature) => {
    features.value.push(feature)
  }

  const removeFeature = (featureId: string) => {
    const index = features.value.findIndex(f => f.id === featureId)
    if (index > -1) {
      features.value.splice(index, 1)
    }
  }

  const updateContact = (newContact: Partial<Contact>) => {
    contact.value = { ...contact.value, ...newContact }
  }

  return {
    // 状态
    user,
    features,
    contact,
    loading,
    theme,
    locale,
    // 计算属性
    isDark,
    featuresCount,
    // 方法
    setUser,
    setTheme,
    toggleTheme,
    setLoading,
    addFeature,
    removeFeature,
    updateContact
  }
})